<template>
    <div class="container shop">
        <!-- header -->
        <header>
            <a class="back" @click="toBack"></a>
        </header>
        <!-- shopInfo -->
        <div class="shopInfo">
            <div class="Timg">
                <img :src="shop.Timg">
            </div>
            <div class="shopTitle">
                <h2 class="name">
                    <span>{{shop.name}}</span>
                    <i class="el-icon-caret-right"></i>
                </h2>
                <div class="evaluation">
                    <span v-for="li in shop.evaluation" :key="li">{{li}}</span>
                </div>
            </div>
            <div class="discount">
                <div class="vipdis disbtn" @click="vipdis" v-if="shop.vipdistatus = 1 ? true : false">
                    <p class="btnleft">
                        <span><small>¥</small>{{shop.vipdis}}</span>
                        <span><i class="el-icon-s-custom"></i>无门槛</span>
                    </p>
                    <p class="get">领取</p>
                </div>
                <div class="dis disbtn" @click="disFlag=true" v-if="shop.distatus = 1 ? true : false">
                    <p class="btnleft">
                        共<span><small>¥</small>{{shop.dis}}</span>
                        <span>店铺</span>
                    </p>
                    <p class="get">领取</p>
                </div>
            </div>
            <div class="activity" @click="actFlag=true" v-if="shop.activityStatus = 1 ? true : false">
                <div class="actleft">
                    <div class="activityInfo">
                        <span class="actitleBox" :class="shop.activityInfo[0].class">{{shop.activityInfo[0].title}}
                            <span class="actitle">{{shop.activityInfo[0].title}}</span>
                        </span>
                        <span class="actxt">{{shop.activityInfo[0].txt}}</span>
                    </div>
                </div>
                <div class="actright">{{shop.activityNum}}个优惠<span class="el-icon-caret-bottom"></span></div>
            </div>
            <p class="notice">{{shop.notice}}</p>
        </div>
        <!-- tab -->
        <el-tabs v-model="activeName" ref="tab" @tab-click="handleClick">
            <el-tab-pane label="点餐" name="first">
                <ordering></ordering>
            </el-tab-pane>
            <el-tab-pane label="评价" name="second">
                <comment></comment>
            </el-tab-pane>
            <el-tab-pane label="商家" name="third">
                <merchant></merchant>
            </el-tab-pane>
        </el-tabs>
        <!-- disMsg -->
        <mt-popup v-model="disFlag" position="bottom">
            <div class="Msg">
                <h2 class="msgTitle">店铺专享红包</h2>
                <div class="redPacket">
                    <h4>进店领红包</h4>
                    <div>
                        <div class="packet" v-for="(item, i) in shop.redPacket" :key="i">
                            <div class="packetInfo">
                                <div class="packetLeft">
                                    <p> ¥ <span>{{item.save}}</span></p>
                                </div>
                                <div class="packetRight">
                                    <h3>满{{item.min}}元可用</h3>
                                    <p>限本店使用, {{item.startime}}至{{item.endtime}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="close el-icon-close" @click="disFlag=false"></div>
            </div>
        </mt-popup>
        <!-- actMsg -->
        <mt-popup v-model="actFlag" position="bottom">
            <div class="Msg">
                <h2 class="msgTitle">优惠活动</h2>
                <div class="info">
                    <div class="activityInfo" v-for="item in shop.activityInfo" :key="item.title">
                        <span class="actitleBox" :class="item.class">{{item.title}}
                            <span class="actitle">{{item.title}}</span>
                        </span>
                        <span class="actxt">{{item.txt}}</span>
                    </div>
                </div>
                <div class="close el-icon-close" @click="actFlag=false"></div>
            </div>
        </mt-popup>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import ordering from './ordering'
import comment from './comment'
import merchant from './merchant'
export default {
    data() {
        return {
            activeName: 'first',
            actFlag: false,
            disFlag: false,
            shop: {
                id: 2,
                Timg: './static/images/shopT2.jpg',
                name: '香他她煲仔饭（潇湘奥园店）',
                evaluation: ['评价4.7', '月售2121单', '蜂鸟专送约22分钟'],
                vipdistatus: 1,
                vipdis: 7,
                distatus: 1,
                dis: 5,
                notice: '公告：嗨！欢迎来到潇湘奥园香他她店！✌️很荣幸为您服务！服务电话0731_85417878. 我们有您最 放心食材 1 泰国原装进口米  2  非转基因食用油  3 国宴标准咸鸭蛋 期待您光临噢！',
                redPacket: [{
                    save: 2,
                    min: 30,
                    startime: '2019-05-07',
                    endtime: '2019-05-14'
                }, {
                    save: 3,
                    min: 35,
                    startime: '2019-05-07',
                    endtime: '2019-05-14'
                }],
                activityStatus: 1,
                activityNum: 5,
                activityInfo: [{
                    class: 'common',
                    title: '满减',
                    txt: '满20减14，满50减27，满100减35'
                }, {
                    class: 'common',
                    title: '折扣',
                    txt: '折扣商品5折起'
                }, {
                    class: 'Tnew',
                    title: '新客',
                    txt: '本店新用户立减2元'
                }, {
                    class: 'Tfirst',
                    title: '首单',
                    txt: '新用户下单立减17元(不与其它活动同享)'
                }, {
                    class: 'Tsuper',
                    title: '特价',
                    txt: '特价商品3元起'
                }]
            },
            shopFlag: true
        }
    },
    methods: {
        handleClick(tab, event) {
            // console.log(tab, event);        
        },
        // 返回上一页
        toBack() {
            this.$router.go(-1)
        },
        vipdis() {
            MessageBox('饿了么提示', '您还不是会员，不能领取');
        },
        handleScroll(e) { 
            if (!this.$refs.tab) {
                return
            }
            let h = document.documentElement.scrollTop;
            let tabh = this.$refs.tab.$el.offsetTop;
            if (h >= tabh) {
                document.querySelector('.el-tabs__header').classList.add("tabtrans")
            } else {
                document.querySelector('.el-tabs__header').classList.remove("tabtrans")
            }
        },
    },
    components: {
        ordering,
        comment,
        merchant
    },
    mounted() {
        this.$store.state.shopId = this.$route.params.id
        window.addEventListener('scroll', this.handleScroll);
    }
}
</script>

<style>
    /* .tab */
    .shop .el-tabs__nav {
        left: 50%;
        transform: translateX(-50%)!important;
    }
    .shop .el-tabs__item {
        padding: 0 40px;
    }
    .shop .el-tabs__nav-wrap::after {
        height: 0;
    }
    .shop .el-tabs__header {
        margin: 0;
    }
    .shop .el-tabs__content {
        margin: 0;
    }
    /* tab变形 */
    .tabtrans {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 99;
    }
</style>

<style scoped>
    /* header */
    header {
        position: relative;
        padding: 4px 10px 0;
        height: 100px;
        background: url('../../../static/images/shopBg1.jpg')no-repeat 50%;
        background-size: cover;
    }
    header::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-image: linear-gradient(0deg,hsla(0,0%,100%,0),rgba(0,0,0,.5));
    }
    .back {
        display: inline-block;
        margin-left: 5px;
        width: 12px;
        height: 12px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
    }
    /* shopInfo */
    .shopInfo {
        position: relative;
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
    }
    .Timg {
        position: absolute;
        width: 75px;
        height: 75px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-top: -60px;
    }
    .Timg img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        box-shadow: 0 0 0.4vw 0 rgba(0,0,0,.2);
    }
    .shopTitle {
        flex: 1;
        width: 270px;
    }
    .shopTitle .name {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding-right: 10px;
        white-space: nowrap;
        font-size: 20px;
        font-weight: 700;
        color: #333;
    }
    .shopTitle .name span {
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;        
    }
    .shopTitle .name i {
        position: relative;
        color: #333;
    }
    .evaluation {
        white-space: nowrap;
        height: 12px;
        margin-top: 6.5px;
        font-size: 11px;
        color: #666;
        text-align: center;
    }
    .evaluation span {
        margin-right: 3px;
    }
    .discount {
        display: flex;
        justify-content: center;
        margin: 10px auto 0;
        width: 300px;
    }
    .disbtn {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-left: 7.5px;
        width: 140px;
        height: 24px;
        font-size: 11px;
        color: #594519;
        background: #ffe578;
    }
    .dis {
        margin-left: 12px;
        background: #fff4f4;
        color: #5c1603;
    }
    .disbtn::after,
    .disbtn::before {
        content: "";
        position: absolute;
        right: 35px;
        bottom: -1px;
        width: 5px;
        height: 3px;
        background: #fff;
        transform: translateX(50%);
        border-bottom: none;
        border-radius: 50% 50% 0 0;
    }
    .disbtn::before {
        top: -1px;
        border-top: none;
    }
    .btnleft {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        margin: 0;
        color: #594519;
        font-size: 12px;
    }
    .btnleft span:first-child {
        margin: 0 10px 0 5px;
        font-weight: 700;
        font-size: 16px;
    }
    .btn small {
        font-size: 12px;
    }
    .btnleft i {
        color: #FDC216;
    }
    .disbtn .get {
        width: 35px;
        font-size: 12px;
        line-height: 26px;
        color: #594519;
        text-align: center;
    }
    .activity {
        display: flex;
        margin: 12px auto 0;
        align-items: center;
        width: 300px;
        font-size: 12px;
        color: #333;
    }
    .actleft {
        flex: 1;
        overflow: hidden;
    }
    .activityInfo {
        display: flex;
        align-items: center;
        font-size: 13px;
    }
    .actitleBox {
        position: relative;
        display: inline-block;
        margin-right: 6px;
        padding: 0px 3px;
        box-sizing: border-box;
        color: transparent;
        white-space: nowrap;
        border-radius: 1px;
        background-color: rgb(240, 115, 115);
    }
    .actitle {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 0;
        top: 0;
        right: -100%;
        bottom: -100%;
        transform: scale(.5);
        transform-origin: 0 0;
        color: #fff;
        font-size: 20px;
    }
    .actxt {
        font-size: 12px;
    }
    .actright {
        color: #999;
    }
    .notice {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 7px 38px 10px 38px;
        padding: 0;
        white-space: nowrap;
        font-size: 11px;
        color: #999;
    }
    /* actMsg */
    .Msg {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f5f5f5;
        box-shadow: 0 -1px 5px 0 rgba(0,0,0,.4);
        z-index: 100;
        padding: 20px 26px;
        max-width: 1920px;
        width: 1920px;
        box-sizing: border-box;
        transition: transform .2s,-webkit-transform .2s;
        will-change: transform;
    }
    .Msg .msgTitle {
        margin: 0;
        font-size: 17px;
        margin-bottom: 16px;
        color: #333;
    }
    .Msg .activityInfo {
        margin-bottom: 12px;
    }
    .TNew {
        background-color: rgb(0, 183, 98);
    }
    .Tfirst {
        background-color: rgb(112, 188, 70);
    }
    .Tsuper {
        background-color: rgb(241, 136, 79);
    }
    .close {
        position: absolute;
        width: 24px;
        height: 24px;
        font-size: 24px;
        top: 10px;
        right: 41%;
        color: #333;
    }
    /* disMsg */
    .redPacket {
        padding-bottom: 15px;
    }
    .redPacket h4 {
        padding: 0 8px;
        font-size: 12px;
        font-weight: 700;
        color: #666;
    }
    .packet {
        display: flex;
        position: relative;
        margin: 10px 7px;
        padding-left: 15px;
        width: 334px;
        height: 94px;
        background: #fff;
        border-radius: 2px;
        border: 1px solid #f5d9d5;
    }
    .packetInfo {
        position: relative;
        display: flex;
        flex: 1;
        padding-right: 10px;
    }
    .packetLeft {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .packetLeft p {
        color: #ff5339;
        font-size: 16px;
    }
    .packetLeft span {
        font-weight: 700;
        font-size: 32px;
    }
    .packetRight {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 18px;
        word-wrap: break-word;
        word-break: break-all;
    }
    .packetRight h3 {
        font-size: 15px;
        color: #333;
        font-weight: 700;
    }
    .packetRight p {
        font-size: 11px;
        color: #666;
        margin-top: 7px;
    }
</style>